<template>
  <div>
    <el-form ref="roleAddRuleForm" :model="roleAddRuleForm" :rules="roleAddRules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="角色名称" prop="sysRoleName">
        <el-input v-model="roleAddRuleForm.sysRoleName" />
      </el-form-item>
      <el-form-item label="角色类型" prop="sysRoleType">
        <el-select v-model="roleAddRuleForm.sysRoleType" placeholder="请选择角色类型">
          <el-option label="管理员" value="0" />
          <el-option label="普通员工" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态:" prop="sysRoleStatus">
        <el-radio-group v-model="roleAddRuleForm.sysRoleStatus">
          <el-radio label="0" border size="medium">启用</el-radio>
          <el-radio label="1" border size="medium">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitFormRoleAdd('roleAddRuleForm')">确认</el-button>
        <el-button @click="resetFormRoleAdd('roleAddRuleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Tip from '@/utils/tip'
import Role from '@/api/axios/api/author/role'
export default {
  name: 'AuthRoleAdd',
  props: {
    authRoleAddObj: {}
  },
  data () {
    return {
      authRoleAddObjTran: {},
      roleAddRuleForm: {
        sysRoleName: '',
        sysRoleType: '',
        sysRoleStatus: '1',
        userGroupUuid: ''
      },
      roleAddRules: {
        sysRoleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        sysRoleType: [
          { required: true, message: '请选择角色类型', trigger: 'change' }
        ],
        sysRoleStatus: [
          { required: true, message: '请选择角色状态', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    authRoleAddObj: {
      deep: true,
      immediate: true,
      handler () {
        this.roleAddRuleForm = []
        this.roleAddRuleForm = JSON.parse(JSON.stringify(this.authRoleAddObj))
      }
    }
  },
  methods: {
    submitFormRoleAdd (formName) {
      this.$refs[formName].validate((valid) => {
        this.innerVisibleAdd = false
        if (valid) {
          Role.roleAdd(this.roleAddRuleForm).then(res => {
            Tip.success(res.data)
            setTimeout(() => {
              this.$emit('closeInnerVisibleRoleAdd', this.roleAddRuleForm)
            }, 1000)
          })
        } else {
          return false
        }
      })
    },
    resetFormRoleAdd (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>

</style>
